Añadir una lupa o imagen de descarga

Hay una entrada de hace bastante tiempo con los pasos a seguir para añadir una lupa sobre las imágenes y quien dice una lupa dice cualquier otra imagen.

En el blog de Oloman vi otra forma de hacerlo incluso con más variantes consiguiendo efectos muy llamativos.

El HTML lo podemos añadir en cualquier parte que admita código es decir entradas, plantilla y gadget de html.

<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src=" URL-IMAGEN1 " />
<span><img alt="" src=" URL-IMAGEN2 " /></span>
</a>
</div>

Los estilos se añaden justo antes de ]]></b:skin>
#contenedor {
position: relative;
}
.miniatura {
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}

Para añadir una imagen de descarga o lupa que parece que es de interés general es suficiente como explica Oloman cambiando en los estilos de "miniatura span" la altura que tenemos en top:0px y dejar más espacio a la izquierda en left:0px  de esa forma centramos la segunda imagen. El único cambio que hice fue sustituir javascript:void(0) por la url del enlace ya sea un enlace externo o dentro del mismo blog.

  
Quedaría algo así:

<div id="contenedor">
<a class="miniatura" href="URL-ENLACE">
<img alt="" src=" URL-IMAGEN1 " />
<span><img alt="" src=" URL-IMAGEN2 " /></span>
</a>
</div>

.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:60px;
left:120px;
}


Una recomendación, no es conveniente que una vez editada la entrada en HTML hagamos comprobaciones para ver el resultado en Redactar porque se altera el código y se pierde la etiqueta span. Es mucho mejor utilizar el vista previa.